<template> 
    <div class="tab tx-s-12">
        <router-link tag="div" class="tab-item" to="/recommend">
            <div>
                <div class="but-icon icon_gczx"></div>
                <span class="tab-link">购彩中心</span>
            </div>
        </router-link>
        <router-link tag="div" class="tab-item" to="/lotteryRecord"> 
            <div>
                <div class="but-icon icon_kjjl"></div>
                <span class="tab-link">开奖记录</span>
            </div>
        </router-link>
        <router-link tag="div" class="tab-item" to="/money"> 
            <div>
                <div class="but-icon icon_cqk"></div>
                <span class="tab-link">存取款</span>
            </div>
        </router-link>
        <router-link tag="div" class="tab-item" to="/user"> 
            <div>
                <div class="but-icon icon_grzx"></div>
                <span class="tab-link">个人中心</span>
            </div>
        </router-link>
    </div> 
</template>

<script type="text/ecmascript-6">
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .tab
        box-shadow: 0 0 10px #c3c1cc;
        background: white
        height: 3.25rem
        width: 100%
        display: flex
        position: fixed
        bottom: 0
    .tab-item
        flex: 1
        text-align: center
        margin: auto 0
        .but-icon
            width: 1.5rem
            height: 1.5rem
            margin: 0 auto
            background-size: 100% 100%
            margin-bottom: .25rem
        .icon_gczx
            background-image: url('../common/image/btn_uncheck_gczx.png');
        .icon_kjjl
            background-image: url('../common/image/btn_uncheck_kjjl.png');
        .icon_cqk
            background-image: url('../common/image/btn_uncheck_cqk.png');
        .icon_grzx
            background-image: url('../common/image/btn_uncheck_grzx.png');
        .tab-link
            color: $color-2
         &.router-link-active 
            .icon_gczx
                background-image: url('../common/image/btn_check_gczx.png')
            .icon_kjjl
                background-image: url('../common/image/btn_check_kjjl.png')
            .icon_cqk
                background-image: url('../common/image/btn_check_cqk.png')
            .icon_grzx
                background-image: url('../common/image/btn_check_grzx.png')
            .tab-link
                color: $color-r
</style>